<template>
    <div >
        <p>价格排序：
            <button @click="up" :style="{marginRight:'20px'}">由低到高</button>
            <button @click="down">由高到低</button>
        </p>
        <hr>
        <ul class='homelist'>
            <li v-for="item in homelist" :key="item._id" @click="gotodetail1(item)">
                <img :src="item.pic">
                <p><small>{{item.title}}</small></p>
                <p>
                    <span :style="{color:'red',marginRight:'20px'}"><b>￥：{{item.price}}</b></span>
                    <s><small>￥：{{item.old_price}}</small></s>
                </p>
                
            </li>
        </ul>

    </div>
</template>

<script>
export default {
    props:["homelist"],
    data() {
        return {};
    },
    mounted() {},
    methods: {
        gotodetail1(item){
            this.$router.push({path:"/detail1",query:{item}})
        },
        up(){
                this.homelist.sort((a,b)=>{
                    return a.price-b.price
                });
            },
            down(){
                this.homelist.sort((a,b)=>{
                    return b.price - a.price
                })
            }
    },
};
</script>

<style lang='scss'>
    .homelist{
        overflow: auto;
        margin-bottom: 50px;
        li{
            width: 46%;
            height: 280px;
            margin: 5px;
            border: 1px solid #ccc;
            float: left;
        }
        img{
            width: 80%;
            height: 50%;
        }
    }
</style>
